<!-- eslint-disable vue/no-useless-v-bind -->
<template>
  <div class="blog-page">
    <ElContainer class="blog-container">
      <!-- 
        使用el-row
        props: type: flex justify align
        使用el-cor
        pops: span offset(设置margin) push(position relative) pull xs(媒体查询) 
      -->
      <ElHeader height="auto" hidden-sm-and-down class="blog-header">
        <BaseHeader />
      </ElHeader>
      <!-- 使用v-modal实现跨组件通信 -->
      <!-- <el-header height="auto"  hidden-sm-and-down class="blog-header">
        <BaseHeader v-model="search" />
      </el-header> -->
      <ElContainer class="blog-middle" @scroll="loadMore">
        <ElRow type="flex" justify="center" width="auto" class="blog-middle--wrap">
          <ElCol class="hidden-sm-and-down" :span="2" :push="1">
            <BaseCrecleList v-if="crecleDataItem.length > 0" :crecleData="crecleDataItem" />
          </ElCol>
          <!-- 这里不需要纠结是间距, 直接使用margin调整固定宽度, 不要太纠结 -->
          <ElCol :span="16">
            <Transition mode="out-in" appear enter-active-class=" animate__animated animate__fadeIn">
              <ElMain class="blog-main">
                <!-- 将滚动条包含所有的路由组件, 然后根据传下去的loading, 如果为true, 就加载内容, 然后再关闭锁, 通过传递loading来段判断是否加载 -->
                <!-- 这里是滚动条的原因, 如果出现系统滚动条, 根据滚动条的距离确定是否加载, 需要监听滚动事件, 整个页面的滚动事件, 然后一直监听, 如果超过一定范围发起请求, 加载文章 -->
                <RouterView v-if="isShowLoad" ref="scrollChild" :loading="loading" :searchArticle="searchArticle"/>
              </ElMain>
            </Transition>
          </ElCol>

          <ElCol :span="4" class="hidden-sm-and-down blog-main--slider">
            <BaseSlider v-if="isShowSlider" />
          </ElCol>
        </ElRow>
      </ElContainer>
      <ElFooter class="blog-footer"> 谢谢观看  </ElFooter>
      <BaseModal />
      <!-- <Live2D class="hidden-md-and-down" /> -->
    </ElContainer>
  </div>
</template>

<script setup lang="ts">
// @ is an alias to /src
import 'element-plus/dist/index.css'
import 'element-plus/theme-chalk/display.css'
import { throttle } from 'lodash-es'
import { provide, ref, computed, watch, onMounted, nextTick } from 'vue'
import { useRoute } from 'vue-router'

import BaseCrecleList from '@/components/base/BaseCrecleList.vue'
import BaseHeader from '@/components/base/BaseHeader.vue'
import BaseModal from '@/components/base/BaseModal.vue'
import BaseSlider from '@/components/base/BaseSlider.vue'
import Live2D from '@/components/Live2D.vue'
import { crecleData } from '@/config/crecle.config'
import { useUser } from '@/store/user'

import type { CrecleBaseType } from '@/config/crecle.config'
const trigHeight = 200
let user = useUser()
let route = useRoute()
let loading = ref<boolean>(false)
let searchArticle = ref<string>('')
let crecleDataItem = ref<CrecleBaseType[]>([])
let isShowLoad = ref<boolean>(true)
let isShowSlider = computed(() => {
  return user.token && user.userInfo.nickName
})
let scrollChild = ref<any>(null)
onMounted(() => {
  crecleDataItem.value = crecleData['home']
  
})

watch(route, (to) => {
  crecleDataItem.value = crecleData[to.name] || []
  resetRouteView()
  if (to.query?.q) {
    searchArticle.value = to.query.q as string
  }
})

provide('changeLoading', changeLoading)
function changeLoading() {
  loading.value = false
}

function resetRouteView() {
  isShowLoad.value = false
  nextTick(() => {
    isShowLoad.value = true
  })
}
let loadMore = throttle((e: Event) => {
  let target = e?.target as HTMLDivElement
  if (!target?.classList?.contains('blog-middle')) {
    return
  }
  let scrollTop = target.scrollTop
  let scrollHeight = target.scrollHeight
  let clinetHeight = target.clientHeight
  let diffHeight = scrollHeight - clinetHeight
  // 滚动高度 + 可视区域高度 + 目标区域 > 所有高度, 表明需要加载
  if (scrollTop + trigHeight > diffHeight && !loading.value && diffHeight !== 0) {
    loading.value = true
    console.log('加载更多')
  }
}, 500)

</script>
<style lang="stylus">
.blog-container {
  height: 100vh;
  overflow: hidden;
}

.blog-header {
 padding: 0;
}

.blog-middle {
  overflow: hidden;
  overflow-y: auto;
  width: 100%;
  height: 80vh;
  padding-top: 10px;
}

.blog-middle--wrap {
  width: 100%;
}

.blog-main {
  width: 80%;
  height: 100%;
  margin: 0 auto;
  overflow: hidden;
}

.blog-main.el-main {
  padding: 0 20px;
}

.blog-footer {
  width: 100%;
  margin-top: 30px;
  background-color: #606266;
}

.blog-main--slider {
  min-width 200px
  margin-right: 36px;
}
</style>
